<template>
  <div>
    <CommonTreeSearch
      :value.sync="treeValue"
      :inputProps="inputProps"
      :treeProps="treeProps"
    >
      <template v-slot:customNode="scope">
        <span>{{ scope.data.name + "(" + scope.data.num + ")" }}</span>
      </template>
    </CommonTreeSearch>
  </div>
</template>
<script>
import CommonTreeSearch from "./index.vue";
export default {
  name: "TreeSearch",
  components: {
    CommonTreeSearch,
  },
  data() {
    this.inputProps = {
      placeholder: "工厂组织架构",
    };
    this.treeProps = {
      props: {
        children: "children",
        label: "name",
      },
      asyncMethod: () => {
        return [
          {
            name: "数据1",
            num: 10,
            id: "1",
            children: [
              { name: "数据1-1", num: 5, id: "1-1" },
              { name: "数据1-2", num: 5, id: "1-2" },
            ],
          },
          {
            name: "数据2",
            num: 7,
            id: "2",
            children: [
              { name: "数据2-1", num: 3, id: "2-1" },
              { name: "数据2-2", num: 4, id: "2-2" },
            ],
          },
        ];
      },
      filterNodeMethod: (value, data) => {
        let text = data.name + "(" + data.num + ")";
        return (text || "").indexOf(value) > -1;
      },
    };
    return {
      treeValue: "",
    };
  },
};
</script>
<style scoped></style>
